<template>
    <el-dialog :title="dialogStatus | titleFilter" :close-on-click-modal="false" width="600px" :visible.sync="visible">
        <el-form ref="temp" :model="temp" :rules="rule" label-width="120px" @keyup.enter.native="dataFormSubmit()">

            <el-form-item label="园区名称:" prop="parkId">
                <el-select v-model="temp.parkId" placeholder="请选择" @change="park_change">
                    <el-option v-for="item in park_options" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="收费项目:" prop="parkId">
                <el-select v-model="temp.project_id" placeholder="请选择" @change="project_change">
                    <el-option v-for="item in project_options" :key="item.id" :label="item.itemsName" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <!-- <el-form-item label="收费项目" prop="itemsName">
                <el-input v-model="temp.itemsName" placeholder="请输入" />
            </el-form-item> -->

            <el-form-item label="是否周期费用" prop="billingCycleFlag_type">
                <el-select v-model="temp.billingCycleFlag_type" placeholder="请选择" disabled>
                    <el-option v-for="item in billingCycleFlagType_" :key="item.value" :label="item.lable" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="计费周期" prop="billingCycle_type">
                <el-select v-model="temp.billingCycle_type" placeholder="请选择" disabled>
                    <el-option v-for="item in billingCycleType_" :key="item.value" :label="item.lable" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="收费标准" prop="chargeCriterion_type">
                <el-select v-model="temp.chargeCriterion_type" placeholder="请选择" :disabled="chargeCriterion_type_ds"
                    @change="pchargeCriterion_change">
                    <el-option v-for="item in chargeCriterionType_" :key="item.value" :label="item.lable" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="计算方式" prop="countMethod_type">
                <el-select v-model="temp.countMethod_type" placeholder="请选择">
                    <el-option v-for="item in countMethodType_" :key="item.value" :label="item.lable" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="标准名称" prop="criterionName">
                <el-input v-model="temp.criterionName" placeholder="请输入" />
            </el-form-item>

            <el-form-item label="单价" prop="unitPrice" v-if="unitPrice_ds">
                <el-input v-model="temp.unitPrice" type="number" placeholder="请输入" />
            </el-form-item>

            <!-- <el-form-item label="是否启用" prop="projrct_state">
                <el-select v-model="temp.projrct_state" placeholder="请选择">
                    <el-option v-for="item in projectState_" :key="item.value" :label="item.lable" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item> -->

        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">
                取消
            </el-button>
            <el-button type="primary" @click="dataFormSubmit">
                确认
            </el-button>
        </span>
    </el-dialog>
</template>
<script>
import { createFinancecriterion, upDataFinancecriterion, getChargeList } from '@/api/charge'// 请求数据
import { getParkListAll } from '@/api/assets'// 请求数据 固定资产
import { projectState, billingCycleFlagType, moneyAccurateType, billingCycleType, chargeCriterionType, countMethodType } from '@/utils/enum' //字典
export default {
    filters: {
        // 过滤弹框的标题
        titleFilter (type) {
            const textMap = {
                create: '新增',
                update: '修改'
            }
            return textMap[type]
        }
    },
    computed: {
        projectState_ () {
            // let arr = [{ lable: '全部', value: '' }]
            let arr = []
            for (let key in projectState) {
                arr.push({
                    lable: projectState[key],
                    value: key
                })
            }
            return arr
        },
        billingCycleFlagType_ () {
            // let arr = [{ lable: '全部', value: '' }]
            let arr = []
            for (let key in billingCycleFlagType) {
                arr.push({
                    lable: billingCycleFlagType[key],
                    value: key
                })
            }
            return arr
        },
        billingCycleType_ () {
            let arr = []
            for (let key in billingCycleType) {
                arr.push({
                    lable: billingCycleType[key],
                    value: key
                })
            }
            return arr
        },
        chargeCriterionType_ () {
            // let arr = [{ lable: '全部', value: '' }]
            let arr = []
            for (let key in chargeCriterionType) {
                arr.push({
                    lable: chargeCriterionType[key],
                    value: key
                })
            }
            return arr
        },
        countMethodType_ () {
            // let arr = [{ lable: '全部', value: '' }]
            let arr = []
            for (let key in countMethodType) {
                arr.push({
                    lable: countMethodType[key],
                    value: key
                })
            }
            return arr
        },
        // chargeCriterion_type_ds () {
        //     if (this.project_options.length < 1) return false;
        //     console.log(this.project_options, this.temp.project_id)
        //     let project_info = this.project_options.filter(item => {
        //         return this.temp.project_id == item.id
        //     })
        //     console.log(project_info)
        //     return project_info[0].billingCycleFlag == "1" ? true : false

        // }
    },
    data () {
        return {
            visible: false,
            dialogStatus: '', // 弹框新增或者修改
            temp: { // 表单数据
                id: '',
                parkId: '',//园区id
                project_id: '',//项目id
                criterionName: '',//收费项目名称
                billingCycleFlag_type: "1",//是否周期费用
                billingCycle_type: "1", //计算周期
                chargeCriterion_type: "1",//收费标准
                countMethod_type: "1",//计算方式
                unitPrice: '',//单价
                // projrct_state: 1,//是否启用
            },
            chargeCriterion_type_ds: false,//收费标准是否可选
            unitPrice_ds: false,//是否显示单价
            rule: {
                parkId: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                itemsName: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                billingCycleFlag_type: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                billingCycle_type: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                chargeCriterion_type: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                countMethod_type: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                unitPrice: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                criterionName: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ]
            },
            park_options: [],//园区list
            project_options: []//项目list
        }
    },
    created () {
        this.getPark()
    },
    methods: {
        // 初始化
        init (status, param) {
            this.dialogStatus = status // 标题
            this.visible = true // 显示
            this[status](param) // 新增或者修改
            this.$nextTick(() => { // 重置表单
                this.$refs['temp'].clearValidate()
            })
        },
        create () {
            this.resetTemp() // 清空表单
        },

        async update (param) {
            // console.log("--->>>>>", param)
            this.getCharge()
            let data = Object.assign({}, param)//从上一页带过来当前的数据
            // const { data, code } = await getParkDetails({}, param.id) // 从后台获取当前的的数据
            // 成功
            this.temp.id = data.id
            this.temp.parkId = data.parkId
            this.temp.project_id = data.itemsId

            this.temp.criterionName = data.criterionName
            this.temp.unitPrice = data.unitPrice

            this.temp.billingCycleFlag_type = data.billingCycleFlag.toString()
            this.temp.billingCycle_type = data.billingCycle.toString()
            this.temp.chargeCriterion_type = data.chargeCriterion.toString()
            this.temp.countMethod_type = data.countMethod.toString()


        },
        // 新增数据清空表单数据
        resetTemp () {

            this.temp = {
                id: '',
                parkId: '',//园区id
                project_id: '',//项目id

                criterionName: '',//收费项目名称
                billingCycleFlag_type: "1",//是否周期费用
                billingCycle_type: "1", //计算周期
                chargeCriterion_type: "1",//收费标准
                countMethod_type: "1",//计算方式
                unitPrice: '',//单价
            }
        },
        //获取园区list
        async getPark () {
            const res = await getParkListAll().catch(e => { })
            // 失败
            if (!res) { this.listLoading = false; return }
            // 成功
            const { data, code, message } = res
            this.park_options = data
            // console.log("园区list", data)
        },
        //获取项目list
        async getCharge () {

            const res = await getChargeList().catch(e => { })
            // 失败
            if (!res) { this.listLoading = false; return }
            // 成功
            const { data, code, message } = res
            this.project_options = data
            // console.log("项目list", data)
            this.project_change(this.temp.project_id)
        },
        // 表单提交
        dataFormSubmit () {
            this.$refs['temp'].validate(async (valid) => {
                if (!valid) return
                let park = this.park_options.filter(item => {
                    return this.temp.parkId == item.id
                })
                let project = this.project_options.filter(item => {
                    return this.temp.project_id == item.id
                })
                const params = {
                    'id': this.temp.id || undefined,
                    'parkId': park[0].id,
                    'parkName': park[0].name,
                    'itemsId': project[0].id,
                    'itemsName': project[0].itemsName,
                    'criterionName': this.temp.criterionName,
                    'unitPrice': this.temp.unitPrice,
                    'enableFlag': project[0].enableFlag,
                    'billingCycleFlag': this.temp.billingCycleFlag_type,
                    'chargeCriterion': this.temp.chargeCriterion_type,
                    'countMethod': this.temp.countMethod_type,
                    'billingCycle': this.temp.billingCycle_type
                }
                const textMap = {
                    create: createFinancecriterion, // 新增
                    update: upDataFinancecriterion // 修改
                }

                // 提交表单
                const { code, message } = await textMap[this.dialogStatus](params)

                // 成功
                this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                        this.visible = false
                        this.$emit('getList')
                    }
                })
            })
        },

        // ===>>>>>>>>>
        // 选择园区
        park_change (e) {
            // console.log(e)
            this.getCharge()
        },
        //选择项目
        project_change (e) {
            if (this.project_options.length < 1 || !e) return;
            let project_info = this.project_options.filter(item => {
                return e == item.id
            })
            this.temp.billingCycleFlag_type = project_info[0].billingCycleFlag.toString()
            this.temp.billingCycle_type = project_info[0].billingCycleFlag == "1" ? "1" : "3"
            this.temp.chargeCriterion_type = project_info[0].billingCycleFlag == "1" ? "2" : "1"
            this.chargeCriterion_type_ds = project_info[0].billingCycleFlag == "1" ? true : false
        },
        pchargeCriterion_change (e) {
            this.unitPrice_ds = e == "2" ? true : false
        }
    }
}
</script>

<style lang="scss">
.mod-menu {
    .menu-list__input,
    .icon-list__input {
        > .el-input__inner {
            cursor: pointer;
        }
    }
    &__icon-popover {
        width: 458px;
        overflow: hidden;
    }
    &__icon-inner {
        width: 478px;
        max-height: 258px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    &__icon-list {
        width: 458px;
        padding: 0;
        margin: -8px 0 0 -8px;
        > .el-button {
            padding: 8px;
            margin: 8px 0 0 8px;
            > span {
                display: inline-block;
                vertical-align: middle;
                width: 18px;
                height: 18px;
                font-size: 18px;
            }
        }
    }
    .icon-list__tips {
        font-size: 18px;
        text-align: center;
        color: #e6a23c;
        cursor: pointer;
    }
}
</style>
